<template>
	<HeaderNav />
	<article>
		<!-- 网站主体 -->
		<div id="main">
			<section class="ct">
				<!-- 上传表单-->
				<div class="upload">
					<h1>用户注册②<em>填写基本信息、完成用户注册第二步</em></h1>
					<!-- 注册步骤导航-->
					<div class="reg_step">
						<a class="step1">注册信息</a><a class="step">基本信息</a><a class="step2">注册完成</a>
					</div>
					
					<form action="./success.html" id="myform" method="post" autocomplete="off" enctype="multipart/form-data">
						
						<p class="file">
							<input type="file" name="resource" @change="handlerAvator" accept="image/png,image/jpeg,image/gif,image/bmp">
							<!-- 上传后的效果 -->
							<span class="t2" v-if="upload.state">
								<img :src="avatorDataUrl" />
								<b>{{upload.name}}</b>
								<a>重新上传</a>
							</span> 
							<span class="t1" v-else>点击上传用户头像、图片小于5MB</span>
						</p>
						
						<p>
							<label>出生日期：</label>
							<input id="tel" class="upt" type="date" name="birth" value="" />
						</p>
						
						<p>
							<label>昵称：</label>
							<input id="nickname" class="upt" type="text" name="nickname" value="" />
							<span class="source-tag-msg">昵称是您在本网站展示的身份信息</span>
						</p>
						
						<p>
							<label>真实姓名：</label>
							<input id="realname" class="upt" type="text" name="realname" value="" />
						</p>
						
						<p>
							<label>性别：</label>
							<select name="sex" class="upt">
								<option value="s">保密</option>
								<option value="m">男</option>
								<option value="f">女</option>
							</select>
						</p>

						<p>
							<a class="btn" @click="handlerNextRegister">确认完成</a>
							<a class="skip" href="javascript:void(0)" @click="handlerNextRegister">跳过该步骤</a>
						</p>
					</form>
				</div>
			</section>	
		</div>
	</article>
	<Footer />
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue"; 
export default {
	components: {
		HeaderNav, 
		Footer, 
	},
	data() {
		return {
			avatorDataUrl: null ,  // 预览头像
			upload: {
				state: false, 
				url: null,  // 上传后的地址
			}
		}
	},
	methods: {
		handlerAvator(event) {
			// 获取上传的头像
			let avator = event.target.files[0] ;
			this.upload.name = avator.name ;
			let fileReader = new FileReader(); 
			fileReader.readAsDataURL(avator) ;
			fileReader.onload = () => {
				this.avatorDataUrl = fileReader.result ;
				this.upload.state = true ;
			}
			this.$toastr.warning("头像正在上传中...", "",  {timeOut: 0, progressBar:true,
				onShown:()=> {
					// 发送异步请求， 上传头像
					fetch("/xxx/yyy", {timeout: 2000}).then(error=> {
						this.$toastr.clear();
					})
				}
			})
		},
		handlerNextRegister() {
			// 延迟三秒后自动跳转到成功页面
			this.$toastr.success("激活邮件已发送、请注意查收", "",  {timeOut: 3000, onHidden:()=>{
				// 处理找回密码的逻辑, 进行下一个页面
				this.$router.push({name: "third", query: {id: 111, email: 'haredot@outlook.com', tel: "13312345555"}})
			}})
			
		}
	}
}
</script>

<style>
</style>